<template>
    <el-drawer v-model="visibleDrawer" :modal="modal" :direction="direction" :size="width" :showClose="showClose"
        :before-close="handleClose" :modal-class="getModalClass" class="custom-rtl-drawer">
        <template #header>
            <template v-if="!histroy">
                <div class="drawer-title">{{ $t('message.text.docSync') }}</div>
            </template>
            <template v-if="histroy">
                <div class="drawer-title">
                    <svg class="back" @click="back()">
                        <use xlink:href="#keowledge-fanhuishangyiji"></use>
                    </svg>
                    <div class="line"></div>
                    <div class="userInfo-title">{{ $t('message.text.syncHistroy') }}</div>
                </div>
            </template>
            <svg class="drawer-close" v-if="!showClose" @click="handleClose">
                <use xlink:href="#keowledge-danchuangguanbi1"></use>
            </svg>
        </template>
        <template v-if="!histroy">
            <div class="sync-file-title">
                <el-checkbox v-model="checkAllFile" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
                    :disabled="syncFileList.length == 0">
                    <span class="name">{{ $t('message.text.minioServer') }}</span>
                </el-checkbox>
                <div class="right">
                    <el-tooltip :content="$t('message.text.syncHistroy')" effect="light">
                        <svg class="icon" @click="goToHistory">
                            <use xlink:href="#keowledge-lishijilu"></use>
                        </svg>
                    </el-tooltip>
                    <div class="line"></div>
                    <el-button type="primary" @click="startSync"
                        :disabled="syncFileList.length == 0">{{ $t('message.text.sync') }}</el-button>
                </div>
            </div>
            <div class="sync-file-body">
                <el-scrollbar>
                    <el-checkbox-group v-model="checkedFile" @change="handleCheckedChange">
                        <div class="file-item" v-for="(file, index) in syncFileList" :key="index">
                            <el-checkbox :label="file.label" v-if="!file.hidden">
                                <div class="file-content">
                                    <svg class="icon">
                                        <use xlink:href="#keowledge-wenjianjia"></use>
                                    </svg>
                                    <div class="file-name" v-tooltip-auto-show>
                                        <el-tooltip :content="file.label" effect="light">
                                            <span>{{ file.label }}</span>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </el-checkbox>
                        </div>
                    </el-checkbox-group>
                    <jvs-empty text="" imgSrc="@/assets/images/common/noKnow.png" v-if="syncFileList.length == 0"
                        size="200px"></jvs-empty>
                </el-scrollbar>
            </div>
            <div class="tips">
                <div class="tips-title">{{ $t('message.text.fileSyncIns') }}</div>
                <div class="tips-content">{{ $t('message.text.syncIns1') }}</div>
                <div class="tips-content">{{ $t('message.text.syncIns2') }}</div>
                <div class="tips-content">{{ $t('message.text.syncIns3') }}</div>
                <div class="tips-content">{{ $t('message.text.syncIns4') }}</div>
                <div class="tips-content">{{ $t('message.text.syncIns5') }}</div>
            </div>
        </template>
        <template v-if="histroy">
            <div class="sync-log-box"
                :style="{ maxHeight: !(syncPage.total > syncPage.size) ? 'calc(100% - 0px)' : 'calc(100% - 50px)' }">
                <el-scrollbar>
                    <div class="log-item" v-for="(item, index) in syncLogList" :key="index">
                        <div class="name-box">
                            <svg class="icon">
                                <use xlink:href="#keowledge-wenjianjia"></use>
                            </svg>
                            <div class="name" v-tooltip-auto-show>
                                <el-tooltip :content="item.dcName" effect="light">
                                    <span>{{ item.dcName }}</span>
                                </el-tooltip>
                            </div>
                        </div>
                        <div class="time">
                            {{ item.syncTime }}ms
                        </div>
                        <svg class="icon">
                            <use v-bind:xlink:href="`#${item.syncTime ? 'keowledge-a-zu5097' : ''}`"></use>
                        </svg>
                    </div>
                </el-scrollbar>
            </div>
            <div class="page" v-if="syncPage.total > syncPage.size">
                <svg class="icon" @click="cutPage()">
                    <use xlink:href="#keowledge-a-zu4701-copy"></use>
                </svg>
                <el-input-number v-model="syncPage.current" :min="1" :max="Math.ceil(syncPage.total / syncPage.size)"
                    controls-position="right" @blur="numberBlur()" @keyup.enter="numberBlur()"></el-input-number>
                <span class="split">/</span>
                <span>{{ Math.ceil(syncPage.total / syncPage.size) }}</span>
                <svg class="icon" @click="addPage()">
                    <use xlink:href="#keowledge-a-zu4701"></use>
                </svg>
            </div>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    computed,
    getCurrentInstance
} from 'vue'
import md5 from 'js-md5'
import { useRouter } from "vue-router"
const router = useRouter();
import { getFilesync, saveFilesync, getsyncPagelog } from '@/api/knowledge'
import { response } from '@/types/axios'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const props = defineProps({
    direction: {
        type: String,
        default: 'rtl'
    },
    remove: Function,
    hasModal: {
        type: Boolean,
        default: true
    },
    modalTrans: {
        type: Boolean,
        default: true
    },
    width: {
        type: [Number, String],
        default: '429px'
    },
    showClose: {
        type: Boolean,
        default: false
    },
    syncHistroy: {
        type: Boolean,
        default: false
    }
})
const visibleDrawer = ref(false)
const isIndeterminate = ref(false)
const checkAllFile = ref(false)
const checkedFile = ref([])
const { proxy } = getCurrentInstance()
const histroy = ref(false)
const syncPage = ref({
    size: 20,
    current: 1,
    total: 0,
    backPage: 1
})
onMounted(() => {
    init()
})
const modal = computed(() => {
    return props.hasModal
})
const getModalClass = computed(() => {
    if (props.modalTrans) {
        return 'modal-trans'
    } else {
        ''
    }
})
const syncFileList = ref([])
const syncLogList = ref([])
function init() {
    visibleDrawer.value = true
    histroy.value = props.syncHistroy
    getCurrentSync()
}
function getCurrentSync() {
    getFilesync().then((res: response) => {
        if (res.data.code == 0) {
            res.data.data.map((item, index) => {
                //替换字符串
                let Iitem = item.replace('/', '')
                syncFileList.value.push({
                    key: index,
                    label: Iitem,
                    hidden: false,
                    type: '',
                })
            })
        }
    })
}
function handleCheckAllChange(val: boolean) {
    checkedFile.value = []
    if (val) {
        syncFileList.value.forEach((item) => {
            checkedFile.value.push(item.label)
        })
    }
    isIndeterminate.value = false
}
function handleCheckedChange(val: string[]) {
    checkAllFile.value = val.length === syncFileList.value.length
    isIndeterminate.value = val.length > 0 && val.length < syncFileList.value.length
}
function startSync() {
    checkedFile.value.forEach((item, index) => {
        let obj = {
            folderName: item,
            syncIndicator: md5(Math.random().toString(36).slice(2)),//动态随机生成不重复字符串
        }

        // 目前只能一个个同步请求，后续需要一次性发送多个同步消息
        interface syncFile {
            label: string,
            hidden: boolean
        }
        saveFilesync(obj).then((res: response) => {
            if (res.data.code === 0) {
                syncFileList.value.forEach((sitem: syncFile) => {
                    if (item == sitem.label) {
                        sitem.hidden = true
                    }
                })
                if (index == (checkedFile.value.length - 1)) {
                    proxy.$notify({
                        title: $t('message.prompt'),
                        message: $t('message.message.syncReqSuccess'),
                        type: 'success',
                        position: 'bottom-right'
                    })
                }
            }
        })
    })
}
function handleClose() {
    visibleDrawer.value = false
}
function back() {
    histroy.value = false
    syncPage.value.total = 0
    syncPage.value.current = 1
    syncPage.value.backPage = 1
}
function goToHistory() {
    histroy.value = true
    const params = {
        current: syncPage.value.current,
        size: syncPage.value.size
    }
    getsyncPagelog(params).then((res: response) => {
        if (res.data.code == 0) {
            syncLogList.value = res.data.data.records
            syncPage.value.total = res.data.data.total
        }
    })
}
function numberBlur() {
    if (syncPage.value.current && syncPage.value.current != syncPage.value.backPage) {
        goToHistory()
    }
    if (!syncPage.value.current) {
        syncPage.value.current = syncPage.value.backPage
    } else {
        syncPage.value.backPage = syncPage.value.page
    }
}
function cutPage() {
    syncPage.value.current -= 1
    if (syncPage.value.current < 1) {
        syncPage.value.current = 1
    }
    goToHistory()
}
function addPage() {
    syncPage.value.current += 1
    if (syncPage.value.current > Math.ceil(syncPage.value.total / syncPage.value.size)) {
        syncPage.value.current = Math.ceil(syncPage.value.total / syncPage.value.size)
    }
    goToHistory()
}
</script>
<style lang="scss">
.custom-rtl-drawer {
    .el-drawer__header {
        padding: 1.5rem 1.5rem 0rem;
        margin-bottom: 1rem;

        .drawer-title {
            font-size: 1.25rem;
            color: #363b4c;
            @include SourceHanSansCN-Bold;
            display: flex;
            align-items: center;

            .back {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

            .line {
                height: 10px;
                width: 1px;
                background-color: #6f7588;
                margin: 0px 8px;
            }
        }

        .drawer-close {
            width: 1rem;
            height: 1rem;
            cursor: pointer;
        }
    }

    .el-drawer__body {
        padding: 0rem 24px;
    }

    .sync-file-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .name {
            font-size: 16px;
            color: #363b4c;
            @include SourceHanSansCN-Bold;
        }

        .right {
            display: flex;
            align-items: center;

            .icon {
                height: 16px;
                width: 16px;
                cursor: pointer;
            }

            .line {
                width: 1px;
                height: 12px;
                background-color: #eeeff0;
                margin: 0px 8px;
            }

            button {
                height: 24px;
            }
        }
    }

    .sync-file-body {
        margin-top: 18px;
        max-height: calc(100% - 260px);
        background-color: #f5f6f7;
        border-radius: 6px;
        padding: 16px;
        box-sizing: border-box;

        .file-item {
            display: flex;
            align-items: center;

            .file-content {
                display: flex;
                align-items: center;

                .icon {
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                }

                .file-name {
                    max-width: 300px;
                    font-size: 14px;
                    color: #363b4c;
                    @include SourceHanSansCN-Regular;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
    }

    .tips {
        padding: 24px 0px;
        font-size: 12px;
        @include SourceHanSansCN-Regular;

        .tips-title {
            color: #6F7588;
        }

        .tips-content {
            margin-top: 12px;
            color: #363B4C;
        }
    }

    .page {
        display: flex;
        align-items: center;
        justify-content: end;
        font-size: 14px;
        @include SourceHanSansCN-Regular;
        color: #575e73;
        height: 20px;
        margin: 15px 0px;

        .icon {
            width: 18px;
            min-width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .el-input-number {
            width: 32px;
            height: 20px;

            .el-input-number__decrease,
            .el-input-number__increase {
                display: none;
            }

            .el-input__wrapper {
                background-color: #F5F6F7 !important;
                box-shadow: none !important;
                padding: 0px 4px !important;
                box-sizing: border-box !important;
            }
        }

        .split {
            padding: 0px 8px 3px;
        }
    }

    .sync-log-box {
        background: #F5F6F7;
        border-radius: 6px 6px 6px 6px;

        .log-item {
            height: 50px;
            padding: 0px 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #363B4C;
            justify-content: space-between;
            @include SourceHanSansCN-Regular;

            .name-box {
                display: flex;
                align-items: center;

                .icon {
                    margin-right: 4px;
                }

                .name {
                    width: 140px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .time {
                flex: 1;
            }

            .icon {
                width: 16px;
                height: 16px;
            }
        }

        .log-item+.log-item {
            border-top: 1px solid #F5F6F7;
        }
    }
}
</style>